<template>
  <div class="task-list-container">
    <CPageTable @register="registerPage" v-model:search-form="searchForm">
      <template #headerRightButton>
        <el-button
          type="primary"
          @click="handlePull"
          v-btnPermission="'TAA_VIEW_STATISTICA_ANALYSIS'"
          ><CIcon type="c-xian-daoru" class="g-mr4"></CIcon>同步能源数据</el-button
        >
      </template>
      <template #organizationName="{ scope }">
        <CTableColumn
          :main-text="scope.row.organizationName"
          :sub-text="scope.row.organizationCode"
        ></CTableColumn>
      </template>
      <template #dataYear="{ scope }">
        <span v-if="scope.row.dataYear && scope.row.dataMonth"
          >{{ scope.row.dataYear }}-{{ scope.row.dataMonth }}</span
        >
        <span v-else>-</span>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <DatePickerDialog v-model:visible="dialogVisible" @refresh="refresh"></DatePickerDialog>
  </div>
</template>
<script lang="ts">
export default {
  name: 'FactoryCarbonMonitoring'
};
</script>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { GetMonthlyEnergyListResult } from '@/apis/taa/target/model/monitoringModel';

import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import DatePickerDialog from './components/DatePickerDialog/index.vue';
import { useTableList } from './useTableList';
import { useRouter } from 'vue-router';
import { useKeepAliveRefresh } from '@/hooks/useKeepAliveRefresh';

const { searchForm, searchOptions, tableOptions, tableFieldsSetting } = useTableList();
const options = reactive<CPageTableProps>({
  title: '工厂月度能源数据',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage, { refresh }] = useCPageTable(options);
useKeepAliveRefresh(refresh);
const router = useRouter();

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: GetMonthlyEnergyListResult): TableButtonItem[] {
  return [
    {
      text: '每日明细',
      btnPermission: 'TAA_VIEW_EMISSION_MONITORING_DAY',
      onClick: () => handler(row, 'DAY')
    },
    {
      text: '车间明细',
      btnPermission: 'TAA_VIEW_EMISSION_MONITORING_DEPART',
      onClick: () => handler(row, 'PLANT')
    }
  ];
}

const handler = (row: GetMonthlyEnergyListResult, clickType: string) => {
  router.push(
    `factory-carbon-monitoring/monitoring-detail?no=${row.summaryNo}&type=${clickType}&name=${row.organizationName}&date=${row.dataYear}-${row.dataMonth}`
  );
};

const dialogVisible = ref(false);
function handlePull() {
  dialogVisible.value = true;
}
</script>

<style lang="scss" scoped></style>
